<template>
  <div>
    <van-count-down :time="time">
      <template #default="timeData">
        <span class="block">{{ timeData.days }}</span>
        <span class="colon">天</span>
        <span class="block">{{ timeData.hours }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.minutes }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.seconds }}</span>
      </template>
    </van-count-down>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    time: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const timeData = ref({
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
    });

    function timeComputed() {
      console.log("倒计时时间毫秒", props.time);
    }
    timeComputed();

    return {
      timeData,
      timeComputed,
    };
  },
});
</script>

<style scoped lang="less">
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ff290d;
}
.block {
  display: inline-block;
  color: #ff290d;
  font-size: 12px;
  text-align: center;
  background-color: transparent;
}
</style>